<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://file.viplgw.cn/ui/public/css/AI.css">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/tomorrow-night.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://file.viplgw.cn/ui/public/js/marked.min.js"></script>
    <script src="https://file.viplgw.cn/ui/public/js/axios.min.js"></script>
    <script src="https://file.viplgw.cn/ui/public/js/jquery-3.2.1.min.js"></script>
    <script src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>

</head>
<body>
<div id="__next">
    <div>
        <div style="position:fixed;z-index:9999;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none"></div>
        <main class="flex h-screen w-screen flex-col text-sm text-white dark:text-white dark">
            <div class="fixed top-0 w-full sm:hidden">
                <nav class="flex w-full justify-between bg-[#202123] py-3 px-4">
                    <div class="mr-4"></div>
                    <div class="max-w-[240px] overflow-hidden text-ellipsis whitespace-nowrap">新对话</div>
                    <div class="cursor-pointer hover:text-neutral-400 mr-8"></div>
                </nav>
            </div>
            <div class="flex h-full w-full pt-[48px] sm:pt-0">
                <div class="flex flex-1">
                    <div class="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
                        <div class="max-h-full overflow-x-hidden" id="max-h-full">
                            <div v-for="(item ,index) in quesList">
                                <div v-if="item.type == 'mine'" class="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
                                    <div class="min-w-[40px] text-right font-bold">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round"
                                             class="tabler-icon tabler-icon-user">
                                            <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                                            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                                        </svg>
                                    </div>
                                    <div class="prose whitespace-pre-wrap dark:prose-invert">{{item.content}}
                                    </div>
                                </div>
                                <div v-else class="group px-4 border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100"
                                     style="overflow-wrap: anywhere;">
                                    <div class="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
                                        <div class="min-w-[40px] text-right font-bold"><img alt="" loading="lazy"
                                                                                            width="26" height="26"
                                                                                            decoding="async"
                                                                                            data-nimg="1" srcset=""
                                                                                            src="https://chating.vipchating.com/_next/image?url=https%3A%2F%2Fstatic.yiweiss.com%2Fchating%2F_next%2Fic%2Fic.png&amp;w=52&amp;q=75"
                                                                                            style="color: transparent; margin-left: 3px;">
                                        </div>
                                        <div class="aiContentBox">
                                            <div class="aiContent" style="display: inline"
                                                 v-html="item.html? item.html : item.content || ''"></div>
                                            <span class="loading">▌</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-input absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#343541] dark:to-[#343541] md:pt-2">
                            <div class="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
                                <div class="mx-auto flex w-[350px] rounded-[5px] bg-[#fff] p-[6px] dark:bg-[#343541] sm:w-[800px]">
                                    <div class="relative flex h-[40px] flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-black/10 dark:bg-[#40414F] dark:text-white ">
                                        <textarea v-model="messageInfo"
                                                  class="m-0 resize-none border-0 bg-transparent  py-2 pl-2 pr-8 text-black dark:bg-transparent dark:text-white md:py-2 md:pl-4"
                                                  placeholder="请输入一条消息" rows="1"
                                                  style="resize: none; max-height: 400px; overflow: hidden; height: 38px; bottom: 38px;"></textarea>
                                    </div>
                                    <div class="ml-[10px] flex h-[40px] w-[60px] flex-none justify-center rounded-[5px] bg-[#05a67c] align-middle sm:ml-[20px] sm:w-[80px]">
                                        <button @click="sendMessage"
                                                class="rounded-sm p-1 text-[#fff] dark:bg-opacity-50 dark:text-neutral-100 ">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                 stroke-linecap="round" stroke-linejoin="round"
                                                 class="tabler-icon tabler-icon-send">
                                                <path d="M10 14l11 -11"></path>
                                                <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="px-3 pb-3 pt-2 text-center text-[12px] text-black/50 dark:text-white/50 md:px-4 md:pb-6 md:pt-3">
                                <a target="_blank" rel="noreferrer" class="underline"></a>
                                <div></div>
                            </div>
                        </div>
                        <div class="copyright">
                            Copyright ©2023 成都慧申教育科技有限公司
                            gmat.viplgw.cn All Rights Reserved 蜀ICP备20012245号-5 川公网安备 51010402001157号
                            互联网经营许可证号川B2-20210588
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
</body>
<script>
    marked.setOptions({
        highlight: function (code, lang) {
            return hljs.highlightAuto(code).value;
        },
        gfmtrue: true,
        breaks: true,
        tables: true,
    });
    window.AI = new Vue({
        el: '#__next',
        data() {
            return {
                html: '',
                messageInfo: '',
                replyIng: false,
                quesList: [],
                number: -1,
            }
        },
        watch: {},
        created() {

        },
        mounted() {

        },
        methods: {
            async sendMessage() {
                let that = this;
                if (this.replyIng) {
                    return
                }
                this.replyIng = true;
                this.number++;
                this.quesList.push({
                    content: that.messageInfo,
                    type: 'mine',
                    html: '',
                })
                let eventSource = new EventSource(`http://ai.viplgw.cn/cn/ai/get-content?content=${this.messageInfo}`)

                // 记录 AI 答复的内容
                let content = "";

                eventSource.addEventListener("open", function (e) {
                    that.messageInfo = ''
                    console.log(e)
                    console.log('连接已经建立')
                    $('.loading').eq($('.loading').length).addClass('animate-pulse')
                })
                /*
                * message：后端返回信息，格式可以和后端协商
                */
                eventSource.addEventListener("message", function (res) {
                    let resJson = JSON.parse(res.data)
                    if (resJson.end === true) {
                        eventSource.close()
                        that.replyIng = false
                        $('.loading').removeClass('animate-pulse')
                        return
                    }
                    if (resJson.content) {
                        if (!content) {
                            // 第一条数据来了，先显示
                            that.quesList.push({
                                content: resJson.content,
                                type: 'AI',
                                html: '',
                            })
                            // 再拼接
                            content += resJson.content;
                        } else {
                            // 先拼接
                            content += resJson.content;
                            that.quesList[that.quesList.length - 1].content = content
                        }
                        // let last = that.quesList[that.quesList.length - 1]
                        // last.text += resJson.content
                        // let words = last.text.split('');
                        // let html = words.join('')
                        // last.html = marked.marked(html)
                        // console.log(last.html)
                        // document.querySelectorAll('code').forEach((block) => {
                        //     if (!block.classList.contains('hljs')) {
                        //         block.classList.add('hljs')
                        //     }
                        // });
                        $("#max-h-full").scrollTop($("#max-h-full")[0].scrollHeight);
                    }
                })
                /*
                * error：错误（可能是断开，可能是后端返回的信息）
                */
                eventSource.addEventListener("error", function (err) {
                    console.log(err)
                    console.log('连接出错')
                    eventSource.close()
                })


            },
        },
    });

</script>
</html>
